<script setup>
import { ref } from "vue"
import {addAccountDataAPI,getAccountDetailAPI,editAccountDataAPI} from "../../../api/accounting"
const emit = defineEmits(['update'])
const isShow = ref(false)
const form = ref({
  ruleNumber:null,
  ruleName:null,
  freeDuration:null,
  chargeCeiling:null,
  chargeType:'duration',
  durationTime:null,
  durationPrice:null,
  durationType:null,
  turnPrice:null,
  partitionFrameTime:null,
  partitionFramePrice:null,
  partitionIncreaseTime:null,
  partitionIncreasePrice:null
})
const rules = ref({
  ruleNumber:[
    {required:true,message:'请输入计算规则编号',trigger:'blur'}
  ],
  ruleName:[
    {required:true,message:'请输入计算规则名称',trigger:'blur'}
  ],
  chargeType:[
    {required:true,message:'请选择计算规则方式',trigger:'blur'}
  ]
})
const formRef = ref(null)
const status = ref([{id:'minute',name:'分钟'},{id:'hour',name:'小时'}])
const options = status.value.map(i=>{
  return {
    value:i.id,
    label:i.name
  }
})
const close = ()=>{
  isShow.value = false
  formRef.value.resetFields()
}
const confirm = ()=>{
  formRef.value.validate(async(valid)=>{
    if(!valid) return 
    if(form.value.id){
      await editAccountDataAPI(form.value)
    }else{
    await addAccountDataAPI(form.value)
    }
    close()
    emit('update')
  })
}
const getAccountDetail = async(id)=>{
  const res = await getAccountDetailAPI(id)
  form.value = res.data
}
 defineExpose({isShow,getAccountDetail})
</script>

<template>
  <el-dialog  v-model="isShow" title="添加计费规则" width="35%" modal-class="dialog" style="border-radius: 10px;">
    <el-form ref="formRef" :model="form" :rules="rules" class="form" label-position="top" label-width="337px">
      <el-form-item label="计费规则编号" prop="ruleNumber">
        <el-input v-model="form.ruleNumber" placeholder="请输入计费规则编号" style="width:337px"></el-input>
      </el-form-item>
      <el-form-item label="计费规则名称" style="width:337px" prop="ruleName">
        <el-input v-model="form.ruleName"  placeholder="请输入计费规则名称"></el-input>
      </el-form-item>
      <el-form-item label="计费方式(全天收费)" prop="chargeType">
        <el-radio-group v-model="form.chargeType" >
          <el-radio label="duration" border style="margin-right: 12px;">时长收费</el-radio>
          <el-radio label="turn" border style="margin-right: 12px;">按次收费</el-radio>
          <el-radio label="partition" border >分段收费</el-radio>
       </el-radio-group>
      </el-form-item>
      <el-form-item style="margin-left: 80px;">
        <el-col :span="9">
        <el-form-item label="免费时长">
          <el-input v-model="form.freeDuration" class="freeInput" placeholder="请输入免费时长"></el-input>
        </el-form-item>
        </el-col>
          <el-col :span="8">
          <el-form-item label="收费上限">
          <el-input v-model="form.chargeCeiling" class="chargeInput" placeholder="请输入收费上限"></el-input>
        </el-form-item>
          </el-col>
      </el-form-item>
      <el-form-item label="计费规则" style="width:337px">
        <el-row v-if="form.chargeType==='duration'">
          <el-col :span="1">每</el-col>
          <el-col :span="5" style="margin-right:10px;">
          <el-input v-model="form.durationTime" placeholder="请输入"></el-input>
        </el-col>
        <el-col :span="7" style="margin-right:10px;">
          <el-select-v2
          v-model="form.durationType"
          placeholder="请选择"
          :options="options"
        />
        </el-col>
        <el-col :span="5" style="margin-right:5px;">
          <el-input v-model="form.durationPrice" placeholder="请输入"></el-input>
        </el-col>
        <el-col :span="1">元</el-col>
        </el-row>
        <el-row v-if="form.chargeType==='turn'">
          <el-col :span="4">每次</el-col>
          <el-col :span="15">
            <el-input v-model="form.turnPrice" placeholder="请输入"></el-input>
          </el-col>
          <el-col :span="4">元</el-col>
        </el-row> 
        <el-row v-if="form.chargeType==='partition'" style="margin-bottom: 15px;">
          <el-col :span="6">
            <el-input v-model="form.partitionFrameTime" placeholder="请输入"></el-input>
          </el-col>
          <el-col :span="9">
            小时内,每小时收费
          </el-col>
          <el-col :span="5">
            <el-input v-model="form.partitionFramePrice" placeholder="请输入"></el-input>
          </el-col>
          <el-col :span="1">
            元
          </el-col>
        </el-row>
        <el-row v-if="form.chargeType==='partition'">
          <el-col :span="3">
            每增加
          </el-col>
          <el-col :span="5">
            <el-input v-model="form.partitionIncreaseTime" placeholder="请输入"></el-input>
          </el-col >
          <el-col :span="5">
            小时,增加
          </el-col >
          <el-col :span='5'>
            <el-input v-model="form.partitionIncreasePrice" placeholder="请输入"></el-input>
          </el-col >
          <el-col :span="2">元</el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <template #footer>
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </template>
  </el-dialog>
</template>

<style scoped>
.freeInput.el-input::after{
  content: '分钟';
  width: 60px;
}
.chargeInput.el-input::after{
  content: '元';
}
.form{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
